@import "lib/assets/stylesheets/variable.scss";

// 改变 size, 就是改变这几个属性
@mixin button-size($padding-x, $padding-y, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  border-radius: $border-radius;
}

// 基本样式
.yui-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: $btn-font-weight;
  border: none;
  user-select: none;

  @include button-size(
    $btn-padding-x,
    $btn-padding-y,
    $btn-font-size,
    $btn-radius
  );

  background-image: none;
  cursor: pointer;

  // focus 公用
  &:focus {
    outline: none;
  }

  // 默认
  &.yui-button-default {
    color: #575757;
    background: #f7f7fa;
    &:hover {
      background: #e5e5ea;
    }
    &:active {
      background: #d9d9d9;
    }
    &.yui-button-disabled {
      background: #f7f7fa;
      color: #c5c6c7;
      cursor: not-allowed;
    }
  }

  // primary
  &.yui-button-primary {
    color: #fff;
    background: #3498ff;
    &:hover {
      background: #2589f5;
    }
    &:active {
      background: #1675e0;
    }
    &.yui-button-disabled {
      background: #cce9ff;
      cursor: not-allowed;
    }
  }

  // danger
  &.yui-button-danger {
    color: #fff;
    background: #ff7875;
    &:hover {
      background: #e4383a;
    }
    &:active {
      background: #d42926;
    }
    &.yui-button-disabled {
      background: #eeb4b3;
      cursor: not-allowed;
    }
  }

  // 虚线
  &.yui-button-dashed {
    color: #575757;
    background: #fff;
    border: 1px dashed #575757;
    &:hover {
      color: #3498ff;
      border: 1px dashed #3498ff;
    }
    &:active {
      color: #1675e0;
      border: 1px dashed #1675e0;
    }
    &.yui-button-disabled {
      background: #f7f7fa;
      color: #c5c6c7;
      cursor: not-allowed;
      border: 1px dashed #c5c6c7;
    }
  }

  // link
  &.yui-button-link {
    display: inline-block;
    color: #1675e0;
    background: none;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:active {
      text-decoration: none;
      color: #004299;
    }
    &.yui-button-disabled {
      color: #1675e0;
      opacity: 0.3;
      cursor: not-allowed;
      text-decoration: none;
    }
  }

  // block
  &.yui-button-block {
    width: 100%;
    border-radius: 0;
  }

  // loading
  &.yui-button-loading {
    cursor: wait;
    .yui-button-loading-context {
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        display: block;
      }
    }

    &.yui-button-default {
      background: #f7f7fa;
      i {
        color: #c5c6c7;
      }
    }

    &.yui-button-primary {
      background: #cce9ff;
      i {
        color: #fff;
      }
    }

    &.yui-button-danger {
      background: #eeb4b3;
      i {
        color: #fff;
      }
    }

    &.yui-button-dashed {
      background: #f7f7fa;
      border: 1px dashed #c5c6c7;
      i {
        color: #c5c6c7;
      }
    }
  }

  &.yui-button-lg {
    @include button-size(
      $btn-padding-x-lg,
      $btn-padding-y-lg,
      $btn-font-size-lg,
      $btn-radius
    );
  }
  &.yui-button-sm {
    @include button-size(
      $btn-padding-x-sm,
      $btn-padding-y-sm,
      $btn-font-size-sm,
      $btn-radius
    );
  }
  &.yui-button-xs {
    @include button-size(
      $btn-padding-x-xs,
      $btn-padding-y-xs,
      $btn-font-size-xs,
      $btn-radius
    );
  }

}


